<template>
  <div class="nav">
    <!-- 搜索框 -->
      <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="文章">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
  <!-- 新建文章 -->
    <div class="create-article">
      <el-button type="success" plain @click="register">+ 新建文章</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'search',
  components: {},
  props: {},
  data () {
    return {
      input1: '',
      input2: '',
      input3: '',
      select: ''
    }
  },
  methods: {
    register() {
      this.$router.push('/inside/creation/publish')
      //跳转到上一次浏览的页面
      // this.$router.go(-1)
 
      //指定跳转的地址
      // this.$router.replace('/将要跳转的路由名称')
 
      //指定跳转的路由的名字下
      // this.$router.replace({name:'publish'})
 
      //通过push进行跳转
      // this.$router.push('/将要跳转的路由名称')
    }
  }
}
</script>

<style lang="less" scoped>
.nav {
  display: flex;
  top: 4.4vh;
  width: 60vw;
  height: 7.2vh;
  /* 搜索框 */
  ::v-deep .input-with-select {
    left: 4.2vw;
    width: 50vw;
    height: 7.2vh;
    opacity: 1;
    position: static;
    border-bottom: 1px solid rgba(119, 140, 162, 1);
    .el-input-group__prepend {
      background-color: transparent;
      border: none;
    }
    .el-input__inner {
      height: 7.2vh;
      width: 8.4vw;
      background-color: transparent;
      border: none;
      font-size: 16px;
      font-weight: 500;
    }
    .el-input-group__append {
      background-color: transparent;
      border: none;
    }
  }
  /* 新建文章 */
  .create-article {
        width: 9vw;
        height: 7.2vh;
        padding: 1.5vh 0vw 1.5vh 2.6vw;
        .el-button--success.is-plain {
          color: #fff;
          border-radius: 14px;
          background: rgba(67, 207, 124, 1);
      }
  }
}
</style>
